<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>东单办公系统-部门修改</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<script type="text/javascript" src="media/js/jquery.min.js"></script>
<script src="media/layui/layui.js"></script>
<script type="text/javascript">
	var obj;
	var form;

	$(function() {
		var json = getData();
		obj = JSON.parse(decodeURI(json));
		showData(obj);

	})

	function getData() {
		var url = window.location.search;
		index = url.indexOf("?");
		if (index > -1) {
			var str = url.substr(index + 1);
			if (str.indexOf('=')) {
				return str.split('=')[1];
			}
		}
		return null;
	}
	function showData(obj) {
		$("#f1").val(obj.no);
		$("#f2").val(obj.name);
		//$("#f3").val(obj.did);
		//initData(obj);
		$("#f4").val(obj.sex);
		$("#f6").val(obj.email);
		$("#f7").val(obj.phone);
		$("#f8").val(obj.qq);
		$("#f9").val(obj.entrytime);
		$("#ylimg").attr("src", '/resources/' + obj.heading);
		$("#f11").val(obj.heading);
		$("#id").val(obj.id);
	}

	function initData(obj) {
		$.get("departall.do", null, function(arr) {

			for (i = 0; i < arr.length; i++) {
				if (arr[i].id == obj.did) {
					$("#f3").append(
							"<option value='"+arr[i].id+"'>" + arr[i].name
									+ "</option>");
				}
			}
			for (i = 0; i < arr.length; i++) {
				if (arr[i].id != obj.did) {
					$("#f3").append(
							"<option value='"+arr[i].id+"'>" + arr[i].name
									+ "</option>");
				}
			}
			form.render("select");
		});
	}
</script>
</head>
<body>

	<div class="layui-container" style="margin-top: 5px">
		<form class="layui-form" action="staffupdate.do" method="post">
			<input type="hidden" name="id" id="id">
			<div class="layui-form-item">
				<label class="layui-form-label">工号</label>
				<div class="layui-input-block">
					<input type="text" name="no" readonly="readonly" autocomplete="off"
						class="layui-input" id="f1">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" lay-verify="require"
						autocomplete="off" class="layui-input" id="f2">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属部门</label>
				<div class="layui-input-block">
					<select name="did" id="f3">
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="text" name="sex" lay-verify="require"
						autocomplete="off" readonly="readonly" class="layui-input" id="f4">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" lay-verify="require"
						autocomplete="off" class="layui-input" id="f6">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="text" name="phone" lay-verify="require"
						autocomplete="off" class="layui-input" id="f7">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">QQ</label>
				<div class="layui-input-block">
					<input type="text" name="qq" lay-verify="require"
						autocomplete="off" class="layui-input" id="f8">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">入职日期</label>
				<div class="layui-input-block">
					<input type="date" name="entrytime" readonly="readonly" id="f9"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">照片</label> <img alt="图片预览"
					id="ylimg" src="" width="200px" height="200px" />
				<button type="button" class="layui-btn" id="upfile">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<input type="hidden" name="heading" id="f11"
					onchange="yl(this,'ylimg')" style="display: none" />
			</div>


			<div class="layui-form-item">
				<input class="layui-btn" id="btn1" 
					style="margin-left: 100px" type="submit" value="确认修改">
			</div> 
		</form>
	</div>
	<script type="text/javascript">
		//预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称
		function yl(obj, id) {
			//FileReader
			if (window.FileReader) {//验证当前的浏览器是否支持图片预览
				var reader = new FileReader();
				var file = obj.files[0];
				var regexImage = /^image\//;//js正则表达式，匹配是否拥有image
				if (regexImage.test(file.type)) {
					//设置读取结束的回调函数
					reader.onload = function(data) {
						var img = document.getElementById(id);
						img.src = data.target.result;//将结果数据显示到img标签上

					};
					//开始读取上传的文件内容
					reader.readAsDataURL(file);
				} else {
					alert("亲，看清楚是图片预览");
					return;
				}
			} else {
				alert("亲，浏览器该升级了");

				return;
			}
		}
		layui.use([ 'form', 'upload', 'layedit', 'laydate' ], function() {
			form = layui.form, layer = layui.layer, layedit = layui.layedit,
					laydate = layui.laydate;
			var upload = layui.upload;

			//执行实例
			var uploadInst = upload.render({
				elem : '#upfile' //绑定元素
				,
				url : 'photoupload.do' //上传接口
				,
				done : function(obj) {
					//上传完毕回调
					console.log(obj);
					if (obj.code == 1000) {
						$("#f11").val(obj.msg);
						$("#ylimg")[0].src = "/resources/" + obj.msg;
						//$("#btn1").attr("disabled", false);
					} else {
						$("#ylimg")[0].src = "media/images/qf.jpg";
					}

				},
				error : function() {
					//请求异常回调
				}
			});
			//日期
			laydate.render({
				elem : '#date'
			});
			initData(obj);
		});
	</script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

</body>
</html>